<template>
    <div id="favorites">
        <NavButtons />
        <div class="favorites-container">
            <h1 class="page-title">🏆 游戏排行榜</h1>

            <div class="rank-section" v-for="game in games" :key="game.key">
                <div class="rank-header">
                    <img :src="game.icon" class="game-icon" />
                    <h2>{{ game.name }} Top 10</h2>
                </div>

                <div class="rank-list">
                    <div v-if="game.ranks.length > 0" v-for="(entry, i) in game.ranks" :key="i" class="rank-item">
                        <span class="rank-index">#{{ i + 1 }}</span>
                        <span class="rank-name with-avatar">
                            <img :src="`http://localhost:5000/${entry.avatar}`" alt="avatar" class="avatar" />
                            {{ entry.username }}</span>
                        <span class="rank-score">{{ entry.score }}</span>
                    </div>
                    <p v-else>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import NavButtons from '@/components/NavButtons.vue'

onMounted(() => {
    document.body.classList.add('layout-favorites')
})

onUnmounted(() => {
    document.body.classList.remove('layout-favorites')
})

const games = ref([
    { key: 'eat', name: '吃豆人', icon: '/src/assets/img_play/pacman-master.png', ranks: [] },
    { key: 'snake', name: '贪吃蛇', icon: '/src/assets/img_play/snake.png', ranks: [] },
    { key: 'plane', name: '飞机大战', icon: '/src/assets/img_play/plane.png', ranks: [] },
    { key: 'mario', name: '超级马里奥', icon: '/src/assets/img_play/super_mario.png', ranks: [] },
    { key: 'two', name: '2048游戏', icon: '/src/assets/img_play/2048.png', ranks: [] }
])

onMounted(async () => {
    for (const game of games.value) {
        try {
            const res = await axios.get(
                `http://localhost:5000/top_scores?game=${game.key}`,
                { withCredentials: true }
            )
            if (res.data.status === 'success') {
                game.ranks = res.data.data
            } else {
                game.ranks = []
            }
        } catch {
            game.ranks = []
        }
    }
})
</script>

<style scoped>
#favorites {
    background-image: url('/src/assets/img_play/bg_rank.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 6rem 2rem 2rem;
    /* 顶部 padding 改为 6rem */
    overflow-x: auto;
    box-sizing: border-box;
}

.favorites-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    width: max-content;
    margin: 0 auto;
}

.page-title {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: #ffffff;
    text-shadow: 2px 2px #000;
    z-index: 10;
}

.rank-section {
    flex: 0 0 220px;
    background: #1a1a2d;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 12px #3fa9ff88;
    color: #c0f7ff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rank-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.with-avatar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #888;
}

.game-icon {
    width: 48px;
    height: 48px;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 90%;
    min-height: calc(10 * 2.1rem);
    /* 每条大约 2.1rem，高度撑满10行 */
}

.rank-item {
    display: flex;
    justify-content: space-between;
    background: #2b2b3f;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: monospace;
    width: 100%;
    height: 2.1rem;
    /* 固定每行高度 */
    align-items: center;
}

.rank-index {
    font-weight: bold;
    width: 3rem;
}

.rank-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-score {
    width: 4rem;
    text-align: right;
}
</style>

<style>
body.layout-favorites {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
}

body.layout-favorites #app {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
</style>
